<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h3>表格标签</h3>
    <!--
    表格标签是一组组合标签
        + 表格描述标签 table
        + 表格功能区定义标签 thead tbody tfoot -> table
        + 行定义标签 tr -> thead | tbody | tfoot
        + 行单元格定义标签 td th -> tr
    表格标签使用时，默认是不会绘制表格边框，需要通过定义属性 border 设置边框
        border 属性可以当作 布尔属性使用，但需要注意该属性是因为存在默认值，所以体现出了布尔属性的效果
        border 取值为像素数值 - 控制边框宽度
        表格的边框是由 table + td 两个边框组成完成表格边框
            + 默认单元格与单元格之间是存在间距，可以通过属性 cellspacing 完成间距设置
            + 单元格的内容可以通过属性 cellpadding 设置和边框的间距
     表格标签使用时，通过分别在 td 或者 tr 上增加配置属性，可以实现单元合并或行合并效果
            + 单元格合并 ： td定义 colspan 属性，描述某个单元格需要占几个单元格位置，
                          需要注意：如果表格为标准表格，必须保证每行单元格包括合并结果的个数相同
            + 行合并 ：td定义rowspan 属性，描述单元格需要跨几行
                          需要注意：如果表格为标准表格，必须保证每行单元格包括合并结果的个数相同
    -->
    <table border="1px">
        <tbody>
            <tr>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr>
                <td>内容</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr>
                <td>内容</td>
            </tr>
        </tbody>
    </table>
    <hr>
    <table border="6px" cellspacing="0px">
        <tbody>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
            <td>内容4</td>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
            <td>内容4</td>
        </tr>
        </tbody>
    </table>
    <hr>
    <table border="6px" cellspacing="0px" cellpadding="6px">
        <tbody>
        <tr>
            <td rowspan="2">内容1</td>
            <td>内容2</td>
            <td colspan="2">内容3</td>
<!--            <td>内容4</td>-->
        </tr>
        <tr>
<!--            <td>内容1</td>-->
            <td>内容2</td>
            <td>内容3</td>
            <td>内容4</td>
        </tr>
        </tbody>
    </table>
    <hr>
    <table border>
        <tbody>
            <tr>
                <th width="600px">th标签表示一个单元格，常用描述表格标题，该标签默认加粗居中</th>
            </tr>
            <tr>
                <td>td标签</td>
            </tr>
        </tbody>
    </table>
    <hr>
    <table border>
        <caption>表格名称</caption>
        <tbody>
            <tr>
                <th width="600px">th标签</th>
            </tr>
            <tr>
                <td>td标签</td>
            </tr>
        </tbody>
    </table>
    <hr>
    <table border>
        <tbody>
            <tr>
                <th width="600px">th标签</th>
            </tr>
            <tr>
                <td>td标签</td>
            </tr>
        </tbody>
        <caption align="bottom">表格1</caption>
    </table>
    <hr>
    <!--
        不建议省略 thead | tbody | tfoot
        这些标签只是对表格的行进行代码级的内容区分,不会对展示效果产生任何影响(位置会被固定)
        ==> 对后续 css 和 js 会产生操作的上的影响
    -->
    <table border>
        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>
    </table>
    <hr>
    <table border>
<!--        <thead>-->
<!--            <tr>-->
<!--                <td>内容1</td>-->
<!--                <td>内容1</td>-->
<!--            </tr>-->
<!--        </thead>-->
        <tfoot>
            <tr>
                <td>内容3</td>
                <td>内容3</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>内容</td>
                <td>内容</td>
            </tr>
        </tbody>
        <thead>
            <tr>
                <td>内容1</td>
                <td>内容1</td>
            </tr>
        </thead>
<!--        <tfoot>-->
<!--            <tr>-->
<!--                <td>内容</td>-->
<!--                <td>内容</td>-->
<!--            </tr>-->
<!--        </tfoot>-->
    </table>
</body>
</html>